<template>
    <PageView>
        <a-spin :spinning="loading">
            <a-card :title="uid?`编辑会员`:`新增会员`">
                <a-form :form="form" style="width: 350px">
                    <a-form-item label="账号" :label-col="labelCol" :wrapper-col="wrapperCol">
                        <a-input v-decorator="['phone', { rules: [{ required: true, message: '请输入账号' }] }]" placeholder="请输入账号"/>
                    </a-form-item>
                    <a-form-item label="密码" :label-col="labelCol" :wrapper-col="wrapperCol">
                        <a-input v-decorator="['pwd', { rules: [{ required: true, message: '请输入密码' }] }]" placeholder="请输入密码"/>
                    </a-form-item>
                    <a-form-item v-if="!uid" label="确认密码" :label-col="labelCol" :wrapper-col="wrapperCol">
                        <a-input v-decorator="['pwd2', { rules: [{ required: true, message: '请输入确认密码' }] }]" placeholder="请输入确认密码"/>
                    </a-form-item>
                    <a-form-item label="交易密码" :label-col="labelCol" :wrapper-col="wrapperCol">
                        <a-input v-decorator="['twopwd', { rules: [{ required: true, message: '请输入交易密码' }] }]" placeholder="请输入交易密码"/>
                    </a-form-item>
                    <a-form-item v-if="!uid" label="确认交易密码" :label-col="labelCol" :wrapper-col="wrapperCol">
                        <a-input v-decorator="['twopwd2', { rules: [{ required: true, message: '请输入确认交易密码' }] }]" placeholder="请输入确认交易密码"/>
                    </a-form-item>
                    <a-form-item label="邀请码" :label-col="labelCol" :wrapper-col="wrapperCol">
                        <a-input :disabled="!!uid" v-decorator="['invit_code', { rules: [{ required: true, message: '请输入邀请码' }] }]" placeholder="请输入邀请码"/>
                    </a-form-item>
                    <a-form-item v-if="uid" label="等级" :label-col="labelCol" :wrapper-col="wrapperCol">
                        <a-select v-decorator="['level',{ rules: [{ required: true, message: '请选择等级' }] }]" placeholder="请选择等级">
                            <a-select-option :value="key" v-for="(value,key) in levelArray">
                                {{value}}
                            </a-select-option>
                        </a-select>
                    </a-form-item>
                    <a-form-item v-if="uid" label="静态等级" :label-col="labelCol" :wrapper-col="wrapperCol">
                        <a-select v-decorator="['static_level',{ rules: [{ required: true, message: '请选择静态等级' }] }]" placeholder="请选择静态等级">
                            <a-select-option :value="key" v-for="(value,key) in static_levelArray">
                                {{value}}
                            </a-select-option>
                        </a-select>
                    </a-form-item>
                    <a-form-item v-if="uid" label="动态等级" :label-col="labelCol" :wrapper-col="wrapperCol">
                        <a-select v-decorator="['namic_level',{ rules: [{ required: true, message: '请选择动态等级' }] }]" placeholder="请选择动态等级">
                            <a-select-option :value="i" v-for="i in 5">
                                {{i}}星
                            </a-select-option>
                        </a-select>
                    </a-form-item>
                    <a-form-item v-if="uid" label="邮箱" :label-col="labelCol" :wrapper-col="wrapperCol">
                        <a-input v-decorator="['email', { rules: [{ required: false, message: '请输入邮箱' }] }]" placeholder="请输入邮箱"/>
                    </a-form-item>
                </a-form>
                <a-button type="primary" @click="sub">
                    {{uid?"修改":"新增"}}
                </a-button>
            </a-card>
        </a-spin>
    </PageView>
</template>

<script type="text/jsx">
    import { static_level, level } from '../../utils/status'
    import Member from '../../api/Member'
    export default {
        name: 'addMember',
        data(){
            return{
                form: null,
                loading:true,
                uid:undefined,
                labelCol:{
                    xs:{span:24},
                    sm:{span:8},
                },
                wrapperCol:{
                    xs:{span:24},
                    sm:{span:16},
                },
                static_levelArray: static_level,
                levelArray: level,
            }
        },
        activated(){
            this.$nextTick(()=>{
                this.form = this.$form.createForm(this)
                this.form.resetFields()
                this.uid = this.$route.query.uid||undefined
                this.uid?this.getPerson():this.loading = false
            })
        },
        methods:{
            getPerson(){
                Member.getUserList({uid:this.uid}).then(res => {
                    this.$nextTick(()=>{
                        Object.keys(this.form.getFieldsValue()).forEach(v=>{
                            this.form.setFieldsValue({[v]:res.data[v]||""})
                        })
                        this.form.setFieldsValue({"pwd":res.data.list_pwd})
                        this.form.setFieldsValue({"twopwd":res.data.list_twopwd})
                        this.loading = false
                    })
                })
            },
            sub(){
                this.form.validateFields((err, values) => {
                    if (!err) {
                        this.loading = true
                        Member[this.uid?`saveUser`:`addMember`]({uid:this.uid,...values }).then(res => {
                            this.loading = false
                            this.$router.back()
                        }).catch(res=>{
                            this.loading = false
                        })
                    }
                });
            }
        }
    }
</script>

<style scoped lang="less">

</style>